<template>
    <div>
        <!--搜索表单-->
        <div>
            <Form ref="search" :model="search" inline :label-width="60">
                <FormItem prop="userName" label="反馈者">
                    <Input type="text" v-model="search.userName" placeholder="反馈者">
                    </Input>
                </FormItem>
                <FormItem prop="content" label="反馈内容">
                    <Input type="text" v-model="search.content" placeholder="反馈内容">
                    </Input>
                </FormItem>
                <DatePicker v-model="search.dates" format="yyyy/MM/dd" type="daterange" placement="bottom-end"
                            placeholder="选择入档日期范围" style="width: 200px;margin-left: 40px;"></DatePicker>
                <FormItem prop="field" label="排序项">
                    <Select v-model="search.field" style="width: 180px">
                        <i-option value="feedbackId">编号</i-option>
                        <i-option value="userName">反馈者</i-option>
                        <i-option value="content">反馈内容</i-option>
                        <i-option value="createTime">入档时间</i-option>
                    </Select>
                </FormItem>
                <FormItem prop="isAsc" label="排序">
                    <Select v-model="search.isAsc" style="width: 180px">
                        <i-option :value="1">正序</i-option>
                        <i-option :value="0">倒序</i-option>
                    </Select>
                </FormItem>
            </Form>
        </div>
        <!--表头操作按钮-->
        <div class="mb20">
            <Button type="error" :disabled="del_disabled" icon="md-trash" @click="deleteList" class="ml20">删除</Button>
            <Button type="success" icon="ios-cloud-download-outline" @click="exportExcel" class="ml20">导出</Button>
            <Button type="primary" icon="ios-search" @click="searchSubmit" class="ml20">搜索</Button>
            <Button icon="md-refresh" @click="handleReset" class="ml20">Reset</Button>
        </div>
        <Table border  :columns="columns" :data="data" :loading="loading"
               @on-select="on_select" @on-select-cancel="on_select_cancel"
               @on-select-all="on_select_all" @on-select-all-cancel="on_select_all_cancel">
            <!--使用插槽处理自定义渲染的数据-->
            <template slot-scope="{ row, index }" slot="createTime">
<!--                <span>{{showDate(row.createTime)}}</span>-->
                <Time :time="row.createTime" type="datetime"/>
            </template>
        </Table>
        <Page :total="pageData.totalElements" :page-size="pageSize" show-elevator show-total @on-change="change"
              class-name="page-style"></Page>
    </div>
</template>

<script>
    import {dateToString, downloadExcel, exportExcel, showDate} from "../utils/util";

    export default {
        name: "Feedback",
        data() {
            return {
                loading: false,  //是否显示表格加载
                modal_add: false,
                modal_change: false,
                modal_reset: false,
                del_disabled: true,
                isSearch: false,   //当前是不是搜索模式
                data: [],
                current: 1,
                pageSize: 10,
                pageData: [],
                columns: [
                    {
                        type: 'selection',  //可以选择的一项
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '编号',
                        key: 'feedbackId',
                        sortable: true,
                        width: 150
                    },
                    {
                        title: '反馈者',
                        key: 'userName',
                    },
                    {
                        title: '反馈内容',
                        key: 'content',
                    },
                    {
                        title: '入档时间',
                        slot: 'createTime',
                    }
                ],
                selectIds: [],     //表格中的选中项的Id
                search: {
                    userName: '',
                    content: '',
                    dates: [],
                    page: 1,
                    size: 10,
                    isAsc: 1,
                    field: ''
                }
            }
        },
        created() {
            this.query()
        },
        methods: {
            query() {
                this.loading = true  //显示表格加载动画
                this.request({
                    url: '/system/feedback',
                    method: 'get',
                    params: {page: this.current, size: this.pageSize}
                }).then(res => {
                    this.data = res.data.content
                    this.pageData = res.data
                }).finally(() => {
                    this.loading = false
                })
            },
            change(current) {
                this.current = current;
                this.refreshData();
            },
            refreshData() {
                //刷新数据
                //判断当前页面是不是搜索模式
                if (this.isSearch) {
                    this.querySearch();
                } else {
                    this.query();
                }
            },
            on_select(selection, row) {
                this.selectIds.push(row.feedbackId)
                this.del_disabled = false //去掉删除按钮的禁用状态
            },
            on_select_cancel(selection, row) {
                this.selectIds.forEach((t, index, arr) => {
                    if (row.feedbackId === t) {
                        arr.splice(index, 1);    //删除取消的选项
                    }
                })
                if (this.selectIds.length === 0) {
                    this.del_disabled = true //删除按钮的禁用状态
                }
            },
            on_select_all(selection) {
                selection.forEach((t, index, arr) => {
                    this.selectIds.push(t.feedbackId)
                })
                this.del_disabled = false //去掉删除按钮的禁用状态
            },
            on_select_all_cancel(selection) {
                this.selectIds = []
                this.del_disabled = true //删除按钮的禁用状态
            },
            deleteList() {
                this.$Modal.confirm({
                    title: '提醒',
                    content: '确定要删除所选中的所有出入记录数据？',
                    onOk: () => {
                        this.loading = true
                        this.request({
                            url: '/system/feedback/list',
                            method: 'delete',
                            params: {ids: this.selectIds},
                            paramsSerializer: params => {
                                return this.$qs.stringify(params, {indices: false})
                            }
                        }).then(res => {
                            this.$Message.info(res.msg);
                            this.refreshData(); //更新当前页面
                        }).finally(() => {
                            this.loading = false
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('已取消删除');
                    }
                });
            },
            //重置按键
            handleReset() {
                this.search = {
                    userName: '',
                    content: '',
                    dates: [],
                    page: 1,
                    size: 10,
                    isAsc: 1,
                    field: ''
                }
                //重置页面
                this.isSearch = false
                this.current = 1
                this.query()
            },
            searchSubmit() {
                //条件搜索
                this.current = 1
                this.isSearch = true
                this.querySearch();
            },
            querySearch() {
                this.loading = true
                let dates = this.search.dates
                if (dates.length < 2) {
                    this.search.dates = ['', '']
                }
                if (dates.length === 2) {
                    this.search.dates = [dateToString(dates[0]), dateToString(dates[1])]
                }
                this.search.page = this.current
                this.search.size = this.pageSize

                this.request({
                    url: '/system/feedback/search',
                    method: 'get',
                    params: this.search,
                    paramsSerializer: params => {
                        return this.$qs.stringify(params, {indices: false})
                    }
                }).then(res => {
                    this.data = res.data.content
                    this.pageData = res.data
                    // console.log(this.data)
                }).finally(() => {
                    this.loading = false
                })
            },
            showDate(d){
                return showDate(d)
            },
            exportExcel(){
                exportExcel('/system/feedback/export/excel',this.selectIds)
            }
        }
    }
</script>

<style scoped>

</style>